<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-image: linear-gradient(to bottom right, red, gold);
        }

        .box {
            display: flex;
            position: absolute;
            justify-content: center;
            justify-content: space-around;
            align-items: center;
            left: 50%;
            top: 40%;
            width: 400px;
            height: 250px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            font-size: 70px;
            user-select: none;
            padding: 0 20px;
            transform: translate(-50%, -50%);
            box-shadow: 1px 1px 1px #fff;
            text-shadow: 0px 1px 30px white;
            /* 盒子投影 */
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
                    from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
        }

        /* 其他样式... */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            font-size: 20px;
            user-select: none;
        }
    </style>
</head>

<body>
    <div id="loading" class="loading">正在加载...</div>
    <div class="box">
        <div class="hh"></div>
        <div>:</div>
        <div class="mm"></div>
        <div>:</div>
        <div class="ss"></div>
    </div>
    <script>
        let loading = document.querySelector('.loading');
        let box = document.querySelector('.box');
        box.style.display = 'none'
        function addZero(data) {
            return data < 10 ? '0' + data : data;
        }
        window.onload = function () {
            setInterval(function () {
                let dt = new Date();
                let hh = dt.getHours();
                let mm = dt.getMinutes();
                let ss = dt.getSeconds();

                //为页面上面赋值
                document.querySelector('.hh').innerText = addZero(hh);
                document.querySelector('.mm').innerText = addZero(mm);
                document.querySelector('.ss').innerText = addZero(ss);

                loading.style.display = 'none';
                box.style.display = 'flex'
            }, 1000)
        }
    </script>
</body>

</html>